<template>
	<view class="ass-reply-BG"  v-if="state.focus" @click="cancel">
		<view class="ass-reply ss-flex"  @click.stop>
			<input
				cursor-spacing="85rpx"
				:always-embed="true"
				@confirm="confirm"
				class="ss-flex-1"
			 	:focus="state.focus"
				v-model="state.text"
				:placeholder="props.placeholder"
				confirm-type='send'
			/>
		</view>
	</view>
</template>

<script setup>
	const emit = defineEmits(['reply','cancel'])
	import {
		computed,
		reactive,
		watch 
	} from 'vue';
	import {
		onShow,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	const state = reactive({
		text:'',
		focus:false
	})
	const props = defineProps({
		placeholder:{
			type:String,
			default:()=>''
		},
		focus:{
			type:Boolean,
			default:false	
		},
	});

	const confirm = () => {
        emit('reply',{content:state.text})
		state.text=''
		cancel()
	}
	const cancel = ()=>{
		state.focus=false
		emit('cancel')
	}
	watch(
	  () => props.focus,
	    (newValue, oldValue) => {
	        // newValue === oldValue
	        if(newValue!= state.focus){
				if(newValue){
					
					state.focus=true
				}else{
					state.focus=false
					cancel()
				}
	        }
	    },
	    { deep: true },
	)
	// onPageScroll(() => { });
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}
	.ass-reply-BG{
		position: fixed;
		top:0;
		bottom:0;
		left: 0;
		right: 0;
		z-index: 199;
		background-color: rgba(0,0,0,0.0);
	}
	.ass-reply{
		padding: 15rpx 25rpx calc(env(safe-area-inset-bottom) + 15rpx);
			position: fixed;
			z-index: 200;
			bottom: -1rpx;
			left: 0;
			right: 0;
			height: calc(env(safe-area-inset-bottom) + 60px);
			background-color: #fff;
			&>input{
				padding:15rpx 15rpx;
				background-color: #f6f5f6;
				height: 30px;
	     		border-radius: 40rpx;
				font-size: 32rpx;
			}
		.reply-cancel,
		.reply-send{
			width: 110rpx;
			height: 30px;
			border-radius: 25rpx;
			font-size: 26rpx;
			line-height: 30px;
			text-align: center;
			margin-left: 20rpx;
		}
		.reply-cancel{
			color: #FF8B8B;
			background-color: #fee4e4;
		}
		.reply-send{
			background: #b5f8ff;
			color:#1BBDCE;
	
		}
	}
</style>